<template>
    <BasePopPanel
        type="center"
        height="max-height"
        width="1200px"
        title="企业管控详情"
        @close="globalStore.clearPopInfo()"
    >
        <div>
            <ElForm :model="queryParams" inline label-suffix="：" ref="formRef">
                <ElFormItem label="企业名称" prop="DEVCOMPANY">
                    <ElInput
                        v-model="queryParams.DEVCOMPANY"
                        class="w-230px screen-input"
                        placeholder="请输入"
                        clearable
                    />
                </ElFormItem>
                <ElFormItem label="企业类型" prop="LX">
                    <ElSelect
                        v-model="queryParams.LX"
                        class="w-230px screen-select"
                        placeholder="请选择"
                        clearable
                    >
                        <ElOption v-for="{lx} in qylxOptions" :key="lx" :value="lx" :label="lx" />
                    </ElSelect>
                </ElFormItem>
                <ElFormItem>
                    <ElButton type="primary" @click="handleSearch" class="screen-button">查询</ElButton>
                    <ElButton type="default" @click="handleReset" class="screen-button">重置</ElButton>
                </ElFormItem>
            </ElForm>
            <ElTable :data="tableData" height="540px" v-loading="loading">
                <ElTableColumn type="index" label="序号" width="90" align="center" />
                <ElTableColumn prop="devcompany" label="企业名称" min-width="150" align="center" />
                <ElTableColumn
                    prop="lx"
                    label="企业类型"
                    min-width="150"
                    align="center"
                    :formatter="row => row.lx || '--'"
                />
            </ElTable>
            <Pagination
                v-model:current-page="queryParams.pageNo"
                v-model:page-size="queryParams.pageSize"
                :total="total"
                class="mt-15px"
            />
        </div>
    </BasePopPanel>
</template>

<script setup lang="ts">
import { getEnterpriseCtrlInfoList, getQylxDict } from '@/api/enterpriseIntelligent'
import BasePopPanel from '@/components/BasePopPanel/index.vue'
import { useGlobalStore } from '@/store/global'
import Pagination from '@/components/Pagination/index.vue'

// 全局数据
const globalStore = useGlobalStore()

const formRef = useTemplateRef('formRef')

const queryParams = reactive<Record<string, any>>({
    pageNo: 1,
    pageSize: 10,
    DEVCOMPANY: '',
    LX: ''
})

const qylxOptions = ref<any[]>([])
const loading = ref(false)
const total = ref(0)
const tableData = ref<any[]>([])

fetchData()
fetchQylxOptions()

function handleSearch() {
    queryParams.pageNo = 1
    fetchData()
}

function handleReset() {
    formRef.value?.resetFields()
    handleSearch()
}

function fetchData() {
    loading.value = true
    getEnterpriseCtrlInfoList({
        ...queryParams,
    })
        .then(res => {
            tableData.value = res.data
            total.value = res.totalSize
        })
        .finally(() => {
            loading.value = false
        })
}

function fetchQylxOptions() {
    getQylxDict().then(res => {
        qylxOptions.value = res.data
    })
}
</script>
